<template>
  <div class="foot-box">
    <footer class="foot">
      <ul class="about-company">
        <!--<li class="li">-->
          <!--<dl class="info">-->
            <!--<dt>Categories</dt>-->
            <!--<dd class="about-text1" v-for="item in TreeShapeCategories" @click="goCategories(item)">{{item.name}}</dd>-->
          <!--</dl>-->
        <!--</li>-->
        <li class="li">
          <dl class="info">
            <dt>Company</dt>
            <dd class="about-text1" @click="goAboutUs">About Us</dd>
            <dd class="about-text1" @click="goTerms">Terms Of Use</dd>
            <dd class="about-text1" @click="goPrivacy">Privacy Statement</dd>
            <!--<dd class="about-text1">Press Center</dd>-->
          </dl>
        </li>
        <li class="li">
          <dl class="info">
            <dt>More</dt>
            <!--<router-link tag="dd" to="/FAQ" class="about-text1">FAQ</router-link>-->
            <!--<router-link tag="dd" to="/order-guide" class="about-text1">Cashback & Traking Support</router-link>-->
            <!--<dd class="about-text1">Merchant Support & Help</dd>-->
            <!--<dd class="about-text1" @click="fbModal">Business Inquiries</dd>-->
            <!--<div class="fb-modal" v-show="isfbModal">-->
              <!--<div class="fb-header">-->
                <!--<h3 class="fb-header-title">Business Inquiries</h3>-->
                <!--<i class="fb-close" @click="Close">x</i>-->
                <!--<p class="blacktext">Interested in partnering? We would be happy to hear from you.</p>-->
              <!--</div>-->
              <!--<form class="fb_post_form" name="form">-->

                <!--<div class="form-group">-->
                  <!--<label class="control-label">Title:</label>-->
                  <!--<input type="text" placeholder="Enter your last name" @focus="clearError" v-model="inquiriesTitle" class="form-control"-->
                         <!--name="title">-->
                  <!--<p class="form-control-feedback c-txt-err" v-show="titleError">Required</p>-->
                <!--</div>-->

                <!--<div class="form-group">-->
                  <!--<label class="control-label">Email Address:</label>-->
                  <!--<input type="text" placeholder="Enter your email address" @focus="clearError" v-model="inquiriesEmail"-->
                         <!--class="form-control" name="email">-->
                  <!--<p class="form-control-feedback c-txt-err" v-show="emailError">Invalid email address</p>-->
                <!--</div>-->

                <!--<div class="form-group">-->
                  <!--<label class="control-label">Inquiry:</label>-->
                  <!--<textarea placeholder="Describe your business inquiries here" @focus="clearError" v-model="inquiry"-->
                            <!--class="form-textarea" name="inquiries"></textarea>-->
                  <!--<p class="form-control-feedback c-txt-err" v-show="inquiriesError">Required</p>-->
                <!--</div>-->
                <!--<a class="button" :href="'mailto:Support@meet50off.com?subject='+inquiriesTitle +'&+cc='+inquiriesEmail+'&body='+inquiry">Submit</a>-->
              <!--</form>-->
              <!--<div class="arrow-left"></div>-->
            <!--</div>-->
            <dd class="about-text1" @click="goRefundPolicy">Refund Policy</dd>
          </dl>
        </li>
        <li class="li">
          <dl class="info">
            <dt>Follow</dt>
            <dd class="facebook-icon">
              <a href="https://www.facebook.com/meet50off/" class="link-more" target="_blank"></a>
            </dd>
          </dl>
        </li>
      </ul>
      <div class="email-box">
        <p class="title1">Newsletter</p>
        <p class="exp1">Subscribe to be the first to hear about our exclusive offers and </p>
        <p class="exp1">latest arrivals.</p>
        <div class="foot-logo">
          <button class="email-btn" @click="checkEmailFn">
            <svg t="1528186128318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="1713" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
              <defs></defs>
              <path
                d="M928 192H96a32 32 0 0 0-32 32v576a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32V224a32 32 0 0 0-32-32z m-82 64L512.19 533.92l-0.19 0.16-0.2-0.16L178 256zM128 768V297.64L470.77 583a63.81 63.81 0 0 0 82.46 0L896 297.64V768z"
                p-id="1714" fill="#aaaaaa"></path>
            </svg>
          </button>
          <input type="text" class="email" placeholder="Enter your email" v-model="upemail" @focus="clearErrorInfo"
                 @keyup.enter="checkEmailFn">
          <p class="email-info" v-html="errorInfo"></p>
        </div>
        <div class="company-info">
          © 2018 MEET50OFF, Inc. All Rights Reserved.
        </div>
      </div>
      <div class="fb-mask-light" v-show="isfbModal" @click="Close"></div>
    </footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapMutations} from 'vuex'
  import {Subscribe} from '../../api/email-confirm'
  import monitoring from "../../common/js/monitoring"

  export default {
    data() {
      return {
        errorInfo: '',
        upemail: '',
        inquiriesTitle: '',
        inquiriesEmail: '',
        inquiry: '',
        TreeShapeCategories: [],
        isfbModal: false,
        titleError: false,
        emailError: false,
        inquiriesError: false
      }
    },
    created() {
      const _this = this
      let t1 = setInterval(() => {
        _this.TreeShapeCategories = JSON.parse(window.localStorage.getItem("TreeShapeCategories"))
        if (_this.TreeShapeCategories !== null) {
          clearInterval(t1)
        }
      }, 100)
    },
    methods: {
      fbModal() {
        this.isfbModal = true
      },
      Close() {
        this.isfbModal = false
      },
      clearError() {
        this.titleError = false
        this.emailError = false
        this.inquiriesError = false
      },
      checkEmailFn() {
        let str = this.upemail.trim();
        if (str === '') {
          this.errorInfo = 'Please enter your email address.'
          return false
        }
        if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(str)) {
          this.errorInfo = 'Please enter a correct email address.'
          return false
        }
        this.errorInfo = '';
        this.setRouteLoading(true)
        Subscribe(str).then((res) => {
          monitoring.subscribe({"email": str});//todo Facebook Pixel & Google Analytic Code    subscribe
          this.setRouteLoading(false)
          this.errorInfo = 'post success'
          setTimeout(function () {
            this.errorInfo = ''
          }, 1500)
        });
      },
      goCategories(item) {
        let nameAry = item.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/categories/${name}`
        })
        this.setCategories(item)
        this.setCategoryName(item.name)
        this.setFocus(1)
      },
      clearErrorInfo() {
        this.errorInfo = ''
      },
      goAboutUs() {
        this.$router.push({
          path: '/aboutUs'
        })
      },
      goRefundPolicy() {
        this.$router.push({
          path: '/refundPolicy'
        })
      },
      goPrivacy() {
        this.$router.push({
          path: '/privacyStatement'
        })
      },
      goTerms() {
        this.$router.push({
          path: '/termsAndConditions'
        })
      },
      ...mapMutations({
        setRouteLoading: 'SET_ROUTE_LOADING',
        setCategoryName: 'SET_CATEGORY_NAME',
        setCategories: 'SET_CATEGORIES',
        setFocus: 'SET_CATEGORY_FOCUS',
      })
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .c-txt-err
    color: red

  .foot-box
    width: 100%;
    background #fff
    border-top: 1px solid #ECECEC
    .fb-mask-light
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 296;
      background-color: rgba(0, 0, 0, .6);
    .foot
      width: 1080px;
      margin: 0 auto
      padding: 75px 0 70px;
      display flex
      .about-company
        width: 100%
        flex 1
        display flex
        margin-right 25px
        .li
          width: 165px
          flex 1
          text-align left

          .info
            width: 100%;
            position relative
            dt
              color: #101010
              line-height: 45px
            dd
              color: #a4a4a4
              font-size: 16px
            .facebook-icon
              padding-left: 6px;
              .link-more
                display: inline-block
                width: 32px
                height: 32px
                background url("../../../static/img/facebook.png")
                margin-right: 7px;
              .link-more:hover
                display: inline-block
                width: 32px
                height: 32px
                background url("../../../static/img/facebook-h.png")
                margin-right: 7px;
            .about-text1
              margin-top: 19px
              cursor: pointer
              font-size 14px
              &:hover
                text-decoration underline
            .fb-modal
              min-width: 350px;
              max-width: 350px;
              position absolute
              z-index 300
              background #fff
              padding 12px
              right: -302px;
              top: 0;
              .fb-header
                text-align left
                position relative
                .fb-header-title
                  color: #333
                  font-weight bold
                  margin-bottom 10px
                  font-size 16px
                .fb-close
                  position absolute
                  cursor pointer
                  right 0
                  top: -2px
                  font-weight: 700;
                  font-size 25px
                  line-height: 18px;
                  color: #e0e0e0
                .blacktext
                  color: #333;
                  text-decoration: none
                  margin-bottom 10px
                  font-size 14px
              .fb_post_form
                min-width 300px
              .form-group
                margin-bottom 10px
                .control-label
                  color: #333
                  display block
                  font-weight bold
                  font-size 14px
                  margin-bottom 5px
                .form-control
                  text-indent 1em
                  display: block;
                  width: 100%;
                  height: 30px;
                  margin-bottom: 10px;
                  font-size: 14px;
                  line-height: 1.428571429;
                  color: #333;
                  vertical-align: middle;
                  background-color: #fff;
                  border: 1px solid #ccc
                .form-textarea
                  min-width: 344px
                  max-width: 350px
                  min-height: 65px
                  max-height: 65px
                  font-size 14px
                  text-indent 1em
                .form-control-feedback
                  font-size 12px
              .button
                padding 12px 0
                width 100%
                background #18823a
                color: #fff
                font-weight bold
                font-size 16px
                cursor pointer
                border: none
                outline: none
                display block
                text-align center
              .arrow-left:before
                content: "";
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 10px solid #fff;
                position: absolute;
                top: 161px;
                left: -10px;
      .about-company .li:nth-child(1)
        flex 1
      .about-company .li:nth-child(3)
        flex 0.9
        margin-left 5px
      .about-company .li:nth-child(4)
        flex 0.5
      .about-company .li:nth-child(2)
        flex 0.6
      .email-box
        flex 1
      .title1
        color: #101010
        margin-top: 16px
        margin-bottom: 24px
      .exp1
        color: #a4a4a4;
        margin-top: 9px;
        font-size: 14px;
      .foot-logo
        margin: 12px 0 25px
        border: 1px solid #fff
        background #fff
        height: 36px;
        line-height: 36px;
        width: 331px;
        .email-btn
          width: 15%
          display: inline-block
          cursor: pointer
          vertical-align middle
          height: 100%;
          background transparent
          position: relative
          border: none
          outline: none
          .icon
            position: absolute
            left: 13px;
            top: 1px;
        .email
          width: 83%
          height: 83%
          vertical-align middle
          color: #333
          outline: none
        .email::-webkit-input-placeholder
          color: #98999a
        .email-info
          color: #fa4c4d
          font-size: 14px
          line-height: 30px
      .company-info
        background url('../forgot-password/logo.png') no-repeat left 3px
        background-size: auto 26px
        color: #98999a;
        font-size: 14px;
        height: 40px;
        line-height: 40px
        padding-left: 160px
        span
          cursor: pointer
          &:hover
            text-decoration: underline
</style>
